import React, { useState } from 'react'
import frame from './index.module.css'

import { Menu } from 'antd'
import {ProductOutlined} from '@ant-design/icons'

import { withRouter } from 'react-router-dom'
import {adminRoutes} from '../../routes'

function Index(props) {
  const pathname = props.location.pathname
  
  const [current, setCurrent] = useState(pathname);
  const onClick = (e) => {
    console.log("click ", e);
    setCurrent(e.key);
    props.history.push(e.key)
  };

  const items = adminRoutes.map(item => {
    return   {
      label: item.title,
      key: item.path,
      icon: <ProductOutlined />
    }
  })
  
  return (
    <div className={frame.app_container}>
      <div className={frame.app_header}>
        <div className={frame.app_header_left}>logo</div>
        <div className={frame.app_header_right}>
          <Menu
            onClick={onClick}
            selectedKeys={[current]}
            mode="horizontal"
            items={items}
          />
          {/* <ul className={frame.app_header_right_list}>
            {
              adminRoutes.map((item, index) => {
                return (
                  <li className={`${frame.app_header_right_list_item} ${pathname === item.path ? frame.app_header_right_list_item_active : ''}`} key={index} onClick={() => props.history.push(item.path)}>
                    {item.title}
                  </li>
                )
              })
            }
          </ul> */}
        </div>
      </div>
      <div className={frame.app_content}>{props.children}</div>
    </div>
  )
}

export default withRouter(Index)

